<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-form-item label="节点名称">
            <el-input v-model="form.nodeName"></el-input>
        </el-form-item>
        <el-form-item label="节点ID">
            <el-input v-model="form.typeConcatName" disabled></el-input>
        </el-form-item>
        <el-form-item label="数据库源：" prop="datasourceId">

            <el-select v-model="form.datasourceId" @change="rDsChange" filterable style="width: 100%"
                       :loading="loading">
                <el-option
                        v-for="item in rDsList" :key="item.datasourceId"
                        :label="item.datasourceGroup + '_' + item.datasourceName + '_' + item.datasourceType"
                        :value="item.datasourceId"/>
            </el-select>
        </el-form-item>
        <el-form-item
                v-show="form.datasourceType==='postgresql' || form.datasourceType==='oracle' ||form.datasourceType==='sqlserver'"
                label="Schema：">
            <el-select v-model="form.schema" filterable style="width: 100%" @change="schemaChange">
                <el-option
                        v-for="item in schemaList"
                        :key="item"
                        :label="item"
                        :value="item"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="数据库表名：" prop="table">
            <el-select v-model="form.table" default-first-option filterable style="width: 100%" :loading="loading"
                       @change="rTbChange">
                <el-option v-for="item in rTbList" :key="item" :label="item" :value="item"/>
            </el-select>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="SQL语句">
            <el-input v-model="form.sql" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <!--        <div>-->
        <!--            <el-button type="primary" @click="toReader">库表读取</el-button>-->
        <!--            <el-button type="primary" @click="parseSql">解析SQL</el-button>-->
        <!--            <delete-button @click="deleteField"/>-->
        <!--            <el-table>-->
        <!--                <el-table-column prop="index" label="序号" width="80">-->
        <!--                    <template #default="scope">-->
        <!--                        {{ scope.$index + 1 }}-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="id" label="字段ID">-->
        <!--                    <template #default="scope">-->
        <!--                        <el-input v-model="scope.row.id" type="text"/>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="type" label="中文说明">-->

        <!--                </el-table-column>-->
        <!--                <el-table-column prop="remark" label="字段备注"></el-table-column>-->
        <!--                &lt;!&ndash;                <el-table-column prop="action" label="操作" width="80">&ndash;&gt;-->
        <!--                &lt;!&ndash;                    <template #default="scope">&ndash;&gt;-->
        <!--                &lt;!&ndash;                        <el-button type="text" @click="scope.$emit('delete', scope.$index)">删除</el-button>&ndash;&gt;-->
        <!--                &lt;!&ndash;                    </template>&ndash;&gt;-->
        <!--                &lt;!&ndash;                </el-table-column>&ndash;&gt;-->
        <!--            </el-table>-->

        <!--        </div>-->


    </el-form>
    <dialog-footer @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';

const {flowData} = storeToRefs(flowCount);
import {search as datasourceList} from '@data/api/data/datasource'
import {selectTables,selectSchema} from '@data/api/data/datacollection'

defineComponent({
    name: 'TxtInput',
});
const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})

const rDsList = ref([]);
const rTbList = ref([]);
const schemaList = ref([]);
const loading = ref(false);

const form = reactive({
    nodeName: '',
    name: '',
    remark: '',
    datasourceId: '',
    datasourceType: '',
    connection: "",
    schema: '',
    table: '',
    sql: "",
    type: 'TxtInput',
    copies: 1,
    distribute: 'Y',

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
    getJdbcDs();
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.datasourceId = flowData.value[props.detailObject.id]?.datasourceId || '';
    form.table = flowData.value[props.detailObject.id]?.table || '';
    form.remark = flowData.value[props.detailObject.id]?.remark || '';
    form.sql = flowData.value[props.detailObject.id]?.sql || 'SELECT uid,name,age FROM test_trans.t_user_01';
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

watch(() => form.datasourceId, (newVal, oldVal) => {

    if (form.datasourceType === 'postgresql' || form.datasourceType === 'oracle') {
        getSchema()
    } else {
        getTables();

    }


});

const rDsChange = (e) => {
    // 清空
    form.table = '';
    rDsList.value.find((item) => {
        if (item.datasourceId === e) {
            form.datasourceType = item.datasourceType;
            form.connection = item.datasourceCode;
        }
    })
}


const getJdbcDs = () => {
    loading.value = true
    datasourceList({}).then(response => {
        const {list} = response.data
        rDsList.value = list //list.filter( item => item.jdbcUrl.includes('oracle'))
        loading.value = false
    })
}

const getSchema =() =>{
    const obj = {
        datasourceId: form.datasourceId
    }
    selectSchema(obj).then(response => {
        schemaList.value = response.data
    })
}


const schemaChange =(e)=> {
    form.schema = e
    // 获取可用表
    getTables()
}

// 获取表名
const getTables = () => {
    if (form.datasourceId) {
        let obj = {
            datasourceId: form.datasourceId
        }
        if(form.datasourceType == 'postgresql'  || form.datasourceType == 'oracle'){
            obj.tableSchema = form.schema;
        }
        // 组装
        loading.value = true
        selectTables(obj).then(response => {
            if (response) {
                loading.value = false
                rTbList.value = response.data
            }
        })
    }

}


const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
  // 触发数据更新事件
  // emit('update-data', {
  //   id: props.detailObject.id,
  //   data: form
  // });
    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
    emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

const deleteField = () => {
    console.log('deleteField');
}

</script>

<style scoped>

</style>